// 导入子组件，不同过路由
import Chats from './Chats.js';
import Contacts from './Contacts.js';
import Discover from './Discover.js';
import Me from './Me.js';
export default {
    // 通过点击传入标题名称
    data() {
        return {
            title: "微信",
            componentName:"chats"
        }
    },
    components: {
        "chats": Chats,
        "contacts": Contacts,
        "discover": Discover,
        "me":Me,
    },
    template: `
    <div class="common">
        <div class="header" :class="{white:componentName=='me'}">
            <div class="header-title"  v-if="componentName!=='me'">{{title}}</div>
            <div class="header-icon" v-if="componentName!=='me'">
                <img src="./img/search.png" alt="">
                <img src="./img/加.png" alt="">
            </div>
        </div>
        <div class="content">
            <component :is="componentName"></component>
        </div>
        <div class="footer">
            <div class="footer-item" @click="footerBtnClick('chats','微信')">
                <img src="./img/001.png" alt="" v-if="title=='微信'">
                <img src="./img/005.png" alt="" v-else>
                <p :class="{active:title=='微信'}">微信</p>
            </div>
            <div class="footer-item" @click="footerBtnClick('contacts','通讯录')">
                <img src="./img/002.png" alt="" v-if="title=='通讯录'">
                <img src="./img/006.png" alt="" v-else>
                <p :class="{active:title=='通讯录'}">通讯录</p>
            </div>
            <div class="footer-item" @click="footerBtnClick('discover','发现')">
                <img src="./img/004.png" alt="" v-if="title=='发现'">
                <img src="./img/007.png" alt="" v-else>
                <p :class="{active:title=='发现'}">发现</p>
            </div>
            <div class="footer-item" @click="footerBtnClick('me','')">
                <img src="./img/003.png" alt="" v-if="componentName=='me'">
                <img src="./img/008.png" alt="" v-else>
                <p :class="{active:componentName=='me'}">我</p>
            </div>
        </div>
    </div>
    `,
    methods: {
        footerBtnClick(name, title) {
            this.componentName = name;
            this.title = title;
        }
    },
}